import React, {JSX, ReactNode} from 'react';
import {View, StyleSheet} from 'react-native';
import {BasicText} from '../../../kit/text';
import { normalize } from '../../../utils/adapter';

type Props = {
  title?: string;
  children:ReactNode
};

const TaskCard = function ({title,children}: Props): JSX.Element {
  return (
    <View style={styles.card_warp}>
      <View>
        <BasicText color="#000" fontSize={normalize(14)}>
          {title}
        </BasicText>
      </View>
      <View style={styles.card_content}>
        {children}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  card_warp: {
    marginHorizontal: normalize(12),
    borderRadius: normalize(8),
    backgroundColor: '#FFFFFF',
    transform: [{translateY: -normalize(30)}],
    paddingHorizontal: normalize(12),
    paddingVertical: normalize(16),
  },
  card_content:{},
});

export default React.memo(TaskCard);
